// 嵌套路由：给上一级的 index.tsx -> _layout.tsx
// 内容切换在 props.children里面切换

// IRouteComponentProps是umi提供的props的ts类型
// _layout.tsx文件的props就可以加这个类型
import { IRouteComponentProps, Link, useHistory, history } from 'umi';
import { Button, Checkbox } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';

const Index = (props: IRouteComponentProps) => {
  // const history = useHistory();

  const goAbout = () => {
    history.push('/about');
  };

  const onChange = (e: CheckboxChangeEvent) => {
    console.log(`checked = ${e.target.checked}`);
  };

  return (
    <>
      <div className="box">这是首页</div>
      <Link to="/about">about</Link>
      <Button type="primary" onClick={goAbout}>
        about
      </Button>
      <Button type="primary" onClick={goAbout}>
        about
      </Button>
      <Checkbox onChange={onChange}>Checkbox</Checkbox>
      {props.children}
    </>
  );
};

export default Index;
